<template>
  <div class="page-container">
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员积分管理</el-breadcrumb-item>
        <el-breadcrumb-item>积分规则列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" >
        <el-row class="search-input longInput">

          <el-form-item label="规则名称：">
            <el-input v-model="filters.ruleName" placeholder="规则名称" maxlength="80" clearable></el-input>
          </el-form-item>


          <el-form-item label="规则类型：">
            <el-select v-model="filters.ruleType" placeholder="全部" clearable>
              <el-option label="积分获取" value="1"></el-option>
              <el-option label="积分消耗" value="2"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item prop="obtainMode" label="获取方式">
            <el-select
              v-model="filters.obtainMode"
              clearable
              placeholder="请选择获取方式"
              :size="size"
            >
              <el-option
                v-for="item in obtainModeTypeList"
                :key="item.obtainMode"
                :label="item.obtainName"
                :value="item.obtainMode"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="消耗方式" prop="consumeMode">

            <el-select
              v-model="filters.consumeMode"
              :size="size"
              clearable
            >
              <el-option
                v-for="item in consumeModeTypeList"
                :key="item.consumeMode"
                :label="item.consumeName"
                :value="item.consumeMode"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-row>

        <el-row>
          <el-form-item label="状态：" prop="status" label-width="60px">
            <el-select v-model="filters.status" placeholder="全部" clearable>
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间：" prop="startTime">
            <el-date-picker
              v-model="filters.startTime"
              type="datetime"
              placeholder="开始时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              @change="changeStartDate"
              :picker-options="startDateDisabled"
            ></el-date-picker>
          </el-form-item>
          <span class="times-to">-</span>
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="filters.endTime"
              type="datetime"
              placeholder="结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              @change="changeEndDate"
              :picker-options="endDateDisabled"
            ></el-date-picker>
          </el-form-item>

        </el-row>

        <el-row class="search-button-noborder" style="text-align: right">
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              :label="'搜索'"
              type="primary"
              @click="findPageClick()"
              :size="size"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
              plain
              :size="size"
            />
          </el-form-item>
          <el-form-item>
            <kt-button label="添加积分获取规则" type="primary" @click="addRule()" :size="size" />
          </el-form-item>
          <el-form-item >
            <kt-button label="添加积分消耗规则" type="primary" @click="addConsumeRule()" :size="size" />
          </el-form-item>
        </el-row>
        <!--表格+分页器-->
        <div style="width:100%">
          <!--表格-->
          <el-table
            :data="tableData"
            :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
            :highlight-current-row="true"
            :max-height="1500"
            :size="'mini'"
            style="width: 100%"
            class="specicalTable"
            v-loading="loading"
          >
            <el-table-column align="center" label="规则名称" width="160" element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.ruleName }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="规则类型" width="200">
              <template slot-scope="scope">
                <span v-show="scope.row.ruleType == '1'">积分获取</span>
                <span v-show="scope.row.ruleType == '2'">积分消耗</span>
              </template>
            </el-table-column>

            <el-table-column  align="center" label="获取方式">
              <template slot-scope="scope">
                <span
                  v-show="scope.row.obtainMode != '' && null != scope.row.obtainMode  "
                >{{ scope.row.obtainModeName}}</span>
                <span v-show="scope.row.obtainMode == '' || null == scope.row.obtainMode  ">-</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="消耗方式">
              <template slot-scope="scope">
                <span
                  v-show="scope.row.consumeMode != '' && null != scope.row.consumeMode  "
                >{{ scope.row.obtainModeName}}</span>
                <span v-show="scope.row.consumeMode == '' || null == scope.row.consumeMode  ">-</span>
              </template>
            </el-table-column>

            <el-table-column  align="center" label="创建时间">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime}}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="状态"
            >
              <template slot-scope="scope">
                <span >{{scope.row.status == 1?"启用":"停用"}}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="操作"
              width="300"
            >
              <template slot-scope="scope">
                <kt-button
                  @click="handleDetail(scope.row)"
                  type="text"
                  size="mini"
                  style
                  label="查看"
                ></kt-button>
                <kt-button
                  @click="handleEdit(scope.row)"
                  type="text"
                  size="mini"
                  style
                  label="编辑"
                  :disabled="scope.row.status == 1"
                ></kt-button>
                <kt-button
                  @click="handleDeleteParams(scope.row)"
                  type="text"
                  size="mini"
                  style
                  label="删除"
                  :disabled="scope.row.status == 1"
                ></kt-button>

                <kt-button
                  @click="handleStatus (scope.row ,'启用')"
                  type="text"
                  size="mini"
                  style
                  label="启用"
                  v-show="scope.row.status == 0"
                ></kt-button>
                <kt-button
                  @click="handleProhibitStatus(scope.row , '停用')"
                  type="text"
                  size="mini"
                  style
                  label="停用"
                  v-show="scope.row.status == 1"
                ></kt-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="currentChange"
              :current-page="filters.start"
              :page-size="filters.limit"
              :total="totalSize"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="sizeChange"
            ></el-pagination>
          </div>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    CyTable,
    TreeSelect,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    
    return {
      startDateDisabled: {},//开始时间限制
      endDateDisabled: {},//结束时间限制
      loading:true,
      filtersRules: {

      },
      disabled: true,
      obtainModeTypeList: [
        {
          "obtainMode": 1,
          "obtainName": "下单赠送"
        },{
          "obtainMode": 2,
          "obtainName": "注册赠送"
        },{
          "obtainMode": 3,
          "obtainName": "评价赠送"
        },
        {
          "obtainMode": 5,
          "obtainName": "分享赠送"
        },{
          "obtainMode": 6,
          "obtainName": "点赞赠送"
        },

        {
          "obtainMode": 8,
          "obtainName": "收藏赠送"
        },
      ],
      consumeModeTypeList: [
        {
          "consumeMode": 1,
          "consumeName": "消费抵现金"
        }
      ],
      size: "mini",
      filters: {
        startTime: null,
        endTime: null,
        ruleNum: null,
        ruleName: null,
        ruleType: null,
        obtainMode: null,
        obtainModeName: null,
        consumeMode: null,
        start: 1,
        limit: 10,
      },
      tableData: [],
      totalSize: 0,
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      checked: []
    };
  },
  methods: {
    changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.startTime) {
            return time.getTime() <= new Date(this_.filters.startTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.endTime) {
            return time.getTime() >= new Date(this_.filters.endTime).getTime();
          }
        }
      };
    },
    //分页
    currentChange(start) {
      this.filters.start = start;
      this.findPage();
    },
    sizeChange(limit) {
      this.filters.start = 1;
      this.filters.limit = limit;
      this.findPage();
    },

    //格式化组织初查询条件
    normalizer(node) {
      if (node.children == null || node.children.length == 0) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children
      }
    },
    // 时间判断
    checkStartTime: function() {
      let this_ = this;
      if ("" != this_.filters.startTime) {
        let minTime = new Date(this_.filters.startTime).getTime();
        let maxTime = new Date(this_.filters.endTime).getTime();

        if (minTime > maxTime && maxTime != 0) {
          this_.$message({
            message: "起始时间不能大于结束时间 ",
            type: "error"
          });
          this_.filters.startTime = null;
        }
      }
    },
    checkEndTime: function() {
      let this_ = this;
      let maxTime = new Date(this_.filters.startTime).getTime();
      let minTime = new Date(this_.filters.endTime).getTime();
      if (minTime < maxTime && minTime != 0) {
        this_.$message({
          message: "结束时间不能小于起始时间 ",
          type: "error"
        });
        this_.filters.endTime = null;
      }
    },
    checkRegisteredVal(val) {
      let this_ = this;
      this_.$forceUpdate();
    },

    //编辑方法分步骤 ceditDialogVisible
    handleEdit: function(data) {
      if (data.ruleType == 1) {

        this.$router.push({path: "/IntegraRuleUpdate/" + data.ruleId + "/" + data.ruleType + "/" + data.obtainMode});
      } else if (data.ruleType == 2) {
        this.$router.push({path: "/ConsumeRuleUpdate/" + data.ruleId + "/" + data.ruleType + "/" + data.consumeMode});
      }

    },
    //点击搜索，页码重置
    findPageClick(){
      this.filters.start = 1;
      this.findPage();
    },
    //查看方法
    handleDetail: function(data) {
      if (data.ruleType == 1) {
        this.$router.push({path: "/IntegraRuleInfo/" + data.ruleId + "/" + data.ruleType + "/" + data.obtainMode+ "/-1"});
      } else if (data.ruleType == 2) {
        this.$router.push({path: "/IntegraRuleInfo/" + data.ruleId + "/" + data.ruleType + "/-1/" + data.consumeMode});
      }

    },

    handleProhibitStatus: function(row) {
      let this_ = this;
      this.$confirm("您确定要停用该规则吗？", "提示", {
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          const params = {};
          params.ruleId = row.ruleId;
          params.status = 0;
          const this_ = this;
          this_.utils.request.meMemberIntegralRuleUpdateStatus(params, function(
            res
          ) {
            if (res.code === "0000") {
              this_.$message({ message: "停用成功!", type: "success" });
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
            this_.findPage();
          });
        })
        .catch(() => {});
    },
    //删除方法
    handleDeleteParams: function(row) {
      let this_ = this;

      this.$confirm("您确定要删除该规则吗？", "提示", {
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          const params = {};
          params.ruleId = row.ruleId;
          params.deleteFlag = 1;
          const this_ = this;
          this_.utils.request.deletMemberIntegralInfo(params, function(res) {
            if (res.code === "0000") {
              this_.$message({ message: "删除成功!", type: "success" });
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
            this_.findPage();
          });
        })
        .catch(() => {});
    },
    handleStatus: function(row) {
      let this_ = this;

      this.$confirm("您确定要启用该规则吗？", "提示", {
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          const params = {};
          params.ruleId = row.ruleId;
          params.status = 1;
          params.obtainMode = row.obtainMode;
          params.consumeMode = row.consumeMode;
          const this_ = this;
          this_.utils.request.meMemberIntegralRuleStopStatus(params, function(
            res
          ) {
            if (res.code === "0000") {
              this_.$message({ message: "启用成功", type: "success" });
            }
            this_.findPage();
          });
        })
        .catch(() => {});
    },

    addRule() {
      this.$router.push({path: '/IntegraRuleAdd/'})
    },
    addConsumeRule() {
      this.$router.push({path: '/ConsumeRuleAdd/'})
    },
    // 获取分页数据
    findPage: function() {
      let this_ = this;
      this.loading = true
      this.utils.request.queryMeMemberIntegralRuleList(this_.filters, function(
        res
      ) {
        if (res.code == "0000") {
          this_.tableData = res.data.rows;
          this_.totalSize = res.data.total;
          this_.loading=false;
        }
      });
    },

    //获取选择框数据
    selectionChange(val) {
      this.checked = val.selections;
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    //重置条件
    resetForm(formName) {
      //需要校验的key
      let keys = [
        "startTime",
        "endTime",
        "ruleNum",
        "ruleName",
        "ruleType",
        "obtainMode",
        "consumeMode",
        "deptId",
        "status"
      ];
      let boo = this.seachTableUtils.checkFromIsNull(this.filters, keys);
      if (!boo) {
        return;
      }
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.filters = {
          startTime: null,
          endTime: null,
          ruleNum: null,
          ruleName: null,
          ruleType: null,
          obtainMode: null,
          consumeMode: null,
          status:null,
          start: 1,
          limit: 10
        };
        this.findPage();
      }
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },

  },
  mounted() {
    this.findPage();
  }
};
</script>
<style scoped lang="scss">

</style>
